<template>
  <div class="article_container">
    <van-nav-bar class="page-nav-bar"
                 left-arrow
                 @click-left="$router.back()"
                 background="#40B783"
                 title="头条新闻">
    </van-nav-bar>

    <div class="main-wrap">
      <div v-if="loading"
           class="loading-wrap">
        <van-loading color="#40b783"
                     vertical>
          加载中
        </van-loading>
      </div>

      <div v-else-if="article.title"
           class="article-detail">
        <div class="article-title">{{article.title}}</div>
        <van-cell class="user-info"
                  :border="false">
          <img class="avatar"
               :src="article.aut_photo"
               alt="">
          <div class="left">
            <div class="user-name">{{ article.aut_name }}</div>
            <div class="publish-date">{{article.pubdate | relativeTime}}</div>
          </div>

          <follow-user class="follow-btn"
                       v-model="article.is_followed"
                       :user-id="article.aut_id" />
        </van-cell>

        <div class="details_content markdown-body"
             v-html="article.content"
             ref="article_content"></div>
        <van-divider>正文结束</van-divider>

        <comment-list :source="article.art_id"
                      :list="commentList"
                      @onload-success="totalCommentCount = $event.total_count"
                      @reply-click="onReplyClick" />
      </div>

      <div v-else-if="errStatus === 404"
           class="error-wrap">
        <van-icon name="failure">
          <p class="text">该资源不存在或者已经删除！</p>
        </van-icon>
      </div>
      <div v-else
           class="error-wrap ">
        <van-icon name="failure">
          <p class="text">内容加载失败！</p>
        </van-icon>
        <br>
        <van-button plain
                    type="primary"
                    size="small">点击重试</van-button>
      </div>
    </div>

    <van-tabbar class="btm">
      <van-button round
                  size="small"
                  @click="isPostShow = true"
                  type="primary">
        写评论
      </van-button>
      <van-icon name="chat-o"
                :badge="totalCommentCount" />
      <!-- <van-icon name="star-o" /> -->
      <collect-article v-model="article.is_collected"
                       :article-id="article.art_id"
                       class="btn-item" />
      <!-- <van-icon name="thumb-circle-o" /> -->
      <like-article v-model="article.attitude"
                    :article-id="article.art_id" />
      <!--  -->
      <van-icon name="share-o" />

    </van-tabbar>

    <van-popup v-model="isPostShow"
               position="bottom">
      <comment-post :target="article.art_id"
                    @post-success="onPostSuccess" />
    </van-popup>

    <van-popup v-model="isReplyShow"
               position="bottom"
               style="height:100%">
      <comment-reply v-if="isReplyShow"
                     @reply-popup="close"
                     :comment="currentComment" />
    </van-popup>

  </div>
</template>

<script>
import { getArticleById } from '@/api/article.js'
import { ImagePreview } from 'vant'
import FollowUser from '@/components/follow-user/index.vue'
import CollectArticle from '@/components/collect-article/index.vue'
import LikeArticle from '@/components/like-article/index.vue'
import CommentList from './components/comment-list.vue'
import CommentPost from './components/comment-post.vue'
import CommentReply from './components/comment-reply.vue'
export default {
  name: 'ArticleIndex',
  components: {
    FollowUser,
    CollectArticle,
    LikeArticle,
    CommentList,
    CommentPost,
    CommentReply
  },
  provide: function () {
    return {
      articleId: this.articleId
    }
  },
  props: {
    articleId: {
      type: [Number, String, Object],
      required: true
    }
  },
  data () {
    return {
      // infoNum: 156,
      article: {},
      loading: true,
      errStatus: 0,
      commentList: [],
      totalCommentCount: 0,
      isPostShow: false,
      isReplyShow: false,
      currentComment: {}
    }
  },
  created () {
    this.loadArticle()
  },
  methods: {
    async loadArticle () {
      this.loading = true
      try {
        const { data } = await getArticleById(this.articleId)
        this.article = data.data
        // console.log(this.article)
        setTimeout(() => {
          this.previewImage()
        }, 0)
      } catch (err) {
        if (err.response && err.response.status === 404) {
          this.errStatus = 404
        }
        console.log('获取数据失败', err)
      }
      this.loading = false
    },
    previewImage () {
      const articleContent = this.$refs.article_content
      const imgs = articleContent.querySelectorAll('img')
      const images = []
      imgs.forEach((img, index) => {
        images.push(img.src)
        img.onclick = () => {
          ImagePreview({
            images,
            startPosition: index
          })
        }
      })
    },
    onPostSuccess (data) {
      console.log('index')
      this.isPostShow = false
      this.commentList.unshift(data.new_obj)
    },
    onReplyClick (comment) {
      this.currentComment = comment
      this.isReplyShow = true
    },
    close () {
      this.isReplyShow = false
    }
  }
}
</script>

<style lang="less" scoped >
@import './github-markdown.css';
.article_container {
  background-color: #fff;
  /deep/ .error-wrap {
    color: #c1c1c1;
    // margin-bottom: 30px;
    .van-icon {
      font-size: 208px;
    }
    .text {
      font-size: 16px;
    }
    text-align: center;
  }
  .page-nav-bar {
    background-color: #40b783;
  }
}
/deep/ .van-nav-bar__title {
  color: #fff;
}
/deep/ .van-nav-bar__left {
  .van-icon {
    color: #fff !important;
  }
}
.article-detail {
  background-color: #fff;
  padding: 0 21px;
  .article-title {
    font-size: 38px;
    font-weight: 700;
    padding-top: 20px;
  }
  .avatar {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    box-shadow: 1px 1px 8px 8px rgba(0, 0, 0, 0.1);
    margin: 11px;
  }
  /deep/ .user-info {
    .left {
      position: absolute;
      top: 28px;
      left: 160px;
      .user-name {
        color: #40b783;
      }
      .publish-date {
        font-size: 12px;
        color: #c1c1c1;
      }
    }
  }
  .follow-btn {
    float: right;
    top: 43px;
  }
}
// /deep/.main-wrap {
//   padding: 300px 0px 90px 0;
// }
.btm {
  box-sizing: border-box;
  padding: 18px 20px 0 20px;
  .van-button {
    padding: 0 150px;
    white-space: nowrap;
    margin-right: 20px;
  }
  .van-icon {
    color: #797676;
    margin: 10px 20px 10px 20px;
  }
}
/deep/ .details_content {
  font-size: 30px;
}
/deep/ .loading-wrap,
.article_container {
  height: 93vh !important;
  overflow-y: auto;
}
</style>
